<template>
  <el-dialog @close="closeD" v-model="dialogVisible" :title="title" width="50%">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px">
      <el-form-item label="选择导出年份" prop="year">
        <el-date-picker
          v-model="ruleForm.year"
          type="year"
          placeholder="选择年份"
          @change="getDate"
          format="YYYY"
          value-format ='YYYY'
          >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeD">取消</el-button>
        <el-button type="primary" :loading="saveLoading" @click="handleConfim(ruleFormRef)">
          {{btntitle}}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
  <script lang="ts" setup>
import {
  ElMessageBox,
  ElMessage,
  FormInstance,
  ElNotification,
  UploadInstance,
  UploadProps,
  UploadRawFile,
} from 'element-plus'
import { reactive, ref } from 'vue'
import { deptData } from '@/mock/system'
import { exportEquipment,exportEquipmentzip } from '@/api/admin'
import { useRoute } from 'vue-router'
import { genFileId } from 'element-plus'
const route = useRoute()
const ruleFormRef = ref<FormInstance>()
const dialogVisible = ref<boolean>(false)
const deptDataOptions = ref(deptData)
const title = ref('导出检测报告')
const btntitle = ref('确认导出')
const rules = reactive({
  year: [{ required: true, message: '请选择导出年份', trigger: 'change' }],
  // name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
  // sn: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
  // platform_id: [{ required: true, message: '请选择医院', trigger: 'change' }],
  // room_id: [{ required: true, message: '请选择医院', trigger: 'change' }],
})
const ruleForm = reactive({
   year: '',
   page:1,
   cachename:''
})
const saveLoading = ref(false)
const emit = defineEmits(['refresh'])
// const exportYear = ref('')
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}

const show = (item = {}) => {
  title.value = '导出检测报告'
  btntitle.value  = "确认导出";
  dialogVisible.value = true
}

const getDate = (e)=>{
  console.log(ruleForm,e);
}


const fileHandle = (data, fileName) => {
    let blob = new Blob([data], { type: 'application/zip' })
    let url = window.URL.createObjectURL(blob)
    const link = document.createElement('a') // 创建a标签
    link.href = url
    link.download = fileName // 重命名文件
    link.click()
    URL.revokeObjectURL(url) // 释放内存
  }

const handleConfim = async (done: () => void) => {
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      saveLoading.value = true
      //新增
      exportEquipment(ruleForm).then((res) => {
        if (res.code == 200) {
            btntitle.value = "正在生成第"+ruleForm.page+"/"+res.data.count+"个文件";
            if(ruleForm.page == res.data.count && res.data.finish){
                // window.open();
                btntitle.value = "正在下载";
                // window.open(res.data.url);
                exportEquipmentzip(res.data);
                // return;
                // console.log(res.data);
                ruleForm.page = 1;
                ruleForm.year = '';
                ruleForm.cachename = '';
                dialogVisible.value = false
                saveLoading.value = false    
                btntitle.value  = "确认导出";
                return;
            }else{
              ruleForm.cachename = res.data.cachename;
              // ruleForm.year = res.data.cachename;
              ruleForm.page++;
              handleConfim();
            }
        }
        // upload.value.clearFiles()
        // dialogVisible.value = false
        // saveLoading.value = false
      })
    }
  })
}
function closeD() {
  ruleForm.page = 1;
  ruleForm.year = '';
  ruleForm.cachename = '';
  dialogVisible.value = false;
  saveLoading.value = false ;   
  btntitle.value  = "确认导出";
}
defineExpose({
  show,
})
</script>
  <style lang="scss" scoped>
</style>
  
  